<!doctype html>
<html>
<#assign ctx=request.contextPath>
<head>
<meta charset="utf-8">
<title>注册</title>
<#import "/macros/header_macro.html" as muyaxuan_header>
<link rel="stylesheet" type="text/css" href="${ctx}/css/register.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/header.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/footer.css">
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/header.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js"></script>
<script type="text/javascript">
     $(function(){
         
         $("#hq").click(function(){
	             var url="${ctx}/customer/sendEmailCode";
	             var param={ address: $("#email").val()};
	             if($.trim($("#email").val())!=""){
	                $.post(url,param,function(data){
	                    alert(data.tip);
	                },"json");
		         }else{
		             alert("请填写 邮箱!");
		         }  
	      });
         
         $("input:checkbox[value='1']").click(function(){
        	 $("input:checkbox[value='2']").attr("checked",false);
         });
         $("input:checkbox[value='2']").click(function(){
        	 $("input:checkbox[value='1']").attr("checked",false);
         });
        $("#register").click(function(){
	        var isSubmit = true;
	        var userId=$("#userId");
	        var password=$("#password");
	        var phone=$("#phone");
	        var name=$("#name");
	        var okPassword=$("#okPassword");
	        var email=$("#email");
	        var verification_code=$("#verification_code"); 
			if ($.trim(userId.val()) == ""){
				isSubmit = false;
				alert("* 用户名不能空！")
				userId.focus(); // 获取焦点
			}else if (!/^\w{5,20}$/.test($.trim(userId.val()))){
				isSubmit = false;
				alert("* 用户名必须在5-20位之间！");
			     userId.focus(); // 获取焦点
			}else if ($.trim(password.val()) == ""){
				isSubmit = false;
				alert("* 设置密码不能空！");
				password.focus(); // 获取焦点
			}else if (!/^\w{6,20}$/.test($.trim(password.val()))){
				isSubmit = false;
				alert("* 设置密码必须在6-20位之间！");
				password.focus(); // 获取焦点
			}else if ($.trim(okPassword.val()) == ""){
				isSubmit = false;
				alert("* 确认密码不能空！");
				okPassword.focus(); // 获取焦点
			}else if (!/^\w{6,20}$/.test($.trim(okPassword.val()))){
				isSubmit = false;
				alert("* 确认密码必须在6-20位之间！");
				okPassword.focus(); // 获取焦点
			}else if ($.trim(name.val()) == ""){
				isSubmit = false;
				alert("* 真实姓名不能空！");
				name.focus(); // 获取焦点
			}else if ($("input:checkbox[value='2']").val()==""||$("input:checkbox[value='1']").val()==""){
				isSubmit = false;
				alert("请选择性别");
			}else if (password.val() != okPassword.val()){
				isSubmit = false;
				alert("* 两次密码输入不一致！");
			}else if ($.trim(phone.val()) == ""){ // 手机号码
				isSubmit = false;
				alert("* 手机号码不能为空！");
				phone.focus();
			}else if (!/^1[3|4|5|8]\d{9}$/.test($.trim(phone.val()))){ // 手机号码
				isSubmit = false;
				alert("* 手机号码格式不正确！");
				phone.focus();
			}else if ($.trim(email.val()) == ""){ // 学历
				isSubmit = false;
				alert("* 邮箱地址不能为空！");
				email.focus();
			}else if ($.trim(verification_code.val()) == ""){ // 学历
				isSubmit = false;
				alert("* 验证码不能为空！");
				verification_code.focus();
			}
			if(isSubmit){
				   var params=$("#registerForm").serialize();    
				   var url="${ctx}/customer/register";
				   $.post(url,params,function(data){
				        if(data.status==0){
				        	   alert(data.tip);
				               window.location="${ctx}/customer/showLogin";
				        }else{				        
				               alert(data.tip);
				        }
				   },"json");			   
				}
         });   
     });
        
</script>
</head>
<!--[if lt IE 9]>
<script src="js/IE9.js"></script>
<![endif]-->
<body>
<!--头部开始-->
<@muyaxuan_header.header ctx="${ctx}"/>
<!--中间内容开始-->
<div class="midder">
    <p class="zcnav">木雅轩用户注册
    <span>已注册？请<a href="${ctx}/customer/showLogin">登陆</a></span>
    </p>
    <div class="zhuce">
    <form id="registerForm" method="post">
    <ul id="enroll">
        <li>
            <label for="uesr">用户名：</label>
            <input type="text" name="userId" id="userId" value=""/>
        </li>
        <li>
            <label for="password">设置密码：</label>
            <input type="password" name="password" id="password" value=""/>  
        </li>
        <li>
            <label for="okPassword">确认密码：</label>
            <input type="password" name="okPassword" id="okPassword" value=""/>   
        </li>
        <li>
            <label for="真实姓名">真实姓名：</label>
            <input type="text" name="name" id="name" value=""/>
        </li>
        <li>
            <label for="性别">性别：</label>
            <label><input style="width:20px; height:20px; margin-top:10px;" name="sex" type="checkbox" name="sex" value="1" checked="true"><font color="#000000">男性</font></label>
			<label><input style="width:20px; height:20px; margin-top:10px;" name="sex" type="checkbox" name="sex" value="2"><font color="#000000">女性</font></label>
        </li>
        <li>
            <label for="phone">手机号码：</label>
            <input type="text" name="phone" id="phone" value=""/>
        </li>
        <li>
            <label for="email">验证邮箱：</label>
            <input type="text" name="email" id="email" value=""/>     
        </li>
        <li>
            <label for="verification_code">邮箱验证码：</label>
            <input type="text" name="emailCode" id="verification_code" value="" maxlength="4"/>
            <input id="hq" type="button" name="button" value="获取验证码"/>
        </li>
    </ul>
      <div class="yes">
        <input type="checkbox" id="argee" />
        <label for="argee">我已阅读并同意&lt;<a href="#">木雅轩用户注册协议</a>&gt;</label>
      </div>
      <input class="registerz"  id="register" type="button" name="button" value="立即注册"/>
    </form>
    </div>
    <div class="chart">
    <a href="product_details.html"><img src="${ctx}/images/registers.png"/></a>
    <a href="order.html"><input type="button" name="button" value="￥599 立即抢购"/></a>
    </div>
    <div class="cle"></div>
</div>
<!--中间内容结尾-->

<!--尾部内容-->
<div class="bfoot">
   <p>
    <a href="#">免责条款</a>
    <a href="#">隐身保护</a>
    <a href="#">招聘英才</a>
    <a href="#">联系我们</a>
    <a href="#">公司简介</a>
    <a href="#">批发方案</a>
    <a href="#">配送方式</a>
    <a href="#">留言板</a>
   </p>
  <h1>Copyright © 2003-2016 muyaxuan.net, All Rights Reserved</h1>
 </div>
</body>
</html>
